@mixin fontStyle {
  @apply text-white text-sm opacity-60;
}

.search {
  @apply px-4 pb-10;

  .topInput {
    @apply flex items-center fixed top-0 left-0 bg-bg w-full px-4;
    height: 3.75rem;

    .back {
      @apply w-10 h-10 flex items-center;

      & > img {
        @apply w-5 h-5 object-contain opacity-80;
      }
    }

    .inputBox {
      @apply flex items-center justify-between flex-1 px-3 text-white-60 w-full h-10;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 2rem;

      & > input {
        @apply w-full h-full bg-transparent border-0 outline-0;
        @include fontStyle;

        &::placeholder {
          @include fontStyle;
        }
      }

      .searchImg {
        @apply object-contain w-6 h-6;
      }
    }
  }

  .searchBox {
    margin-top: 4rem;

    .menu {
      @apply h-5 flex justify-between items-center text-sm text-c99;
      margin-bottom: 0.4375rem;

      & > span {
        @apply cursor-pointer;
      }

      .menuBtn {
        @apply cursor-pointer h-5 text-xs flex items-center;

        & > img {
          @apply w-5 h-5 ml-1;
        }
      }
    }

    .searchList {
      @apply flex flex-wrap w-full overflow-hidden mt-3 mb-2;
      max-height: 4.125rem;

      .item {
        @apply cursor-pointer h-7 leading-7 px-4 text-white text-sm rounded;
        background-color: #3e3e3e;
        margin-right: 0.625rem;
        margin-bottom: 0.625rem;

        &:hover {
          @apply bg-bg66;
        }
      }
    }

    .hotSearch {
      @apply flex items-center w-full h-10 text-base text-white;

      .hotIndex {
        @apply w-5 h-5 text-center leading-5 rounded;

        &.one {
          color: #f92828;
        }

        &.two {
          @apply text-theme;
        }

        &.three {
          color: #ffb60c;
        }
      }

      .hotName {
        @apply flex-1;
        margin: 0 0.625rem;
      }

      .hotLabel {
        @apply text-xs h-6 text-center leading-6 text-theme rounded;
        padding: 0 0.625rem;
        background-color: rgba(255, 128, 50, 0.1);
      }

      .hotLabelLive {
        background-color: rgba(51, 156, 255, 0.1);
        color: rgb(51, 156, 255);
      }
    }
  }
}
